<template>
	<view class="wrap">
		<view v-for="comment in commentList" :key="comment.id" class="comment-item">
			<view class="head">
				<view class="primary">
					<u--image :src="comment.avatar" width="32px" height="32px" shape="circle"></u--image>
					<view class="info">
						<text class="nickname">{{ comment.nickname }}</text>
						<u-rate :value="comment.rate" size="12" readonly></u-rate>
					</view>	
				</view>
				<text class="datetime">{{ comment.created }}</text>
			</view>
			<view class="content">{{ comment.content }}</view>
			<view v-if="comment.photos.length > 0" class="photos">
				<u-album :urls="comment.photos" multiple-size="226rpx" 
					reviewFullImage="false" space="12rpx"
				></u-album>
			</view>	
			<view v-if="comment.reply" class="reply">回复：{{ comment.reply }}</view>
		</view>	
	</view>	
</template>

<script>
import { productCommentList } from "@/api/shop.js";
	
export default {
	onLoad(options) {
		if(options.id !== undefined && options.id > 0) {
			this.productId = options.id;
			this.init();
		}
	},
	data() {
		return {
			productId: 0,
			commentList: []
		}
	},
	methods: {
		init() {
			console.log('==========3333');
			productCommentList(this.productId).then(res=>{
				this.commentList = res.data.commentList;
			});
		}
	}
}	
</script>

<style lang="less" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 0 24rpx;
}
	
.comment-item {
	padding: 24rpx 0;
	border-bottom: 1px solid #eee;	
	
	.head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		
		.primary {
			display: flex;
			flex-direction: row;
			
			.info {
				margin-left: 5px;
				
				.nickname {
					padding: 0 3px;
					font-size: 13px;
				}
			}
		}
		
		.datetime {
			font-size: 12px;
			color: #acacac;
		}
	}
	
	.content {
		padding: 10px 0;
		font-size: 14px;
	}
	
	.reply {
		font-size: 14px;
		color: #884f12;
	}
}	
</style>